<template>
    <layout>
        <mt-header title="家庭作业">
            <a href="/study/homework" slot="left">
                <mt-button icon="back"></mt-button>
            </a>
        </mt-header>
        <div class="title-box">
            <div class="t-top"><div class="number">{{ currentIndex + 1 }}</div>/{{ totalCount }}</div>
            <div class="t-tile">{{ current.content }}</div>
            <ul class="t-list">
                <li v-for="(item, index) in current.choiceDTOs" :class="{'active': option == item.id}" @click="choice(item.id)">
                    <span class="title">{{item.serialNumber}}</span>
                    <div v-html="item.content"></div>
                </li>
            </ul>
        </div>
        <div class="footer">
            <div class="btn" :class="{'active': currentIndex != 0}" @click="last">上一题</div>
            <div class="btn active" @click="next" v-show="totalCount != currentIndex + 1">下一题</div>
            <div class="btn active" @click="submit" v-show="totalCount == currentIndex + 1">提交</div>
        </div>

    </layout>
</template>
<style lang="scss">
    @import "index.scss";
</style>
<script type="text/babel">
    import { api } from 'framework/config.js';
    import Layout from "component/layout/standard";

    import Vue from 'vue'
    import Mint from 'mint-ui';
    Vue.use(Mint);
    export default {
        components: {
            Layout
        },
        data(){
            return {
                currentIndex: 0,
                current: {},
                option: '',
                totalCount: 0,
                record: []
            }
        },
        computed: {
            api(){
                return api();
            }
        },
        watch: {
            currentIndex: function(){
                this.current = this.questions[this.currentIndex];
            }
        },
        methods: {
            choice(id){
                this.option = id;

                //将当前题选择的答案放入
                this.record[this.currentIndex] = {
                    option: this.option,
                    id: this.current.id
                }
            },
            last(){
                if (this.currentIndex != 0){
                    //取出上一题
                    this.currentIndex = this.currentIndex - 1;
                    let item = this.record[this.currentIndex];
                    this.option = item.option;
                }
            },
            next(){
                if (!this.option){
                    Mint.Toast('请选择选项');
                    return;
                }

                if (this.currentIndex < this.totalCount - 1){
                    //取出下一题的数据
                    this.currentIndex = this.currentIndex + 1;
                    let item = this.record[this.currentIndex];
                    this.option = item.option;
                }
            },
            submit(){
                if (!this.option){
                    Mint.Toast('请选择选项');
                    return;
                }

                Mint.Indicator.open()
                let params = new URLSearchParams();
                params.append("id", this.id);

                console.log(JSON.stringify(this.record));
                params.append("choiceStringJson", JSON.stringify(this.record));

                this.$http.post('/api/homework/practice/submit', params)
                    .then((response) => {
                        if (response.status == 200){
                            let data = response.data;
                            if (data.code == 200) {
                                Mint.Toast('提交成功');
                                window.location.href = `/study/homework/practice/result?id=${this.id}`;
                            }
                        }else{
                            Mint.Toast('提交失败');
                        }

                        Mint.Indicator.close()
                    });
            }
        },
        mounted() {
            if (this.questions && this.questions.length > 0){
                this.totalCount = this.questions.length;
                this.current = this.questions[this.currentIndex];

                for (let i = 0; i < this.totalCount; i++){
                    this.record.push({
                        id: this.questions[i].id,
                        option: ''
                    });
                }

            }
        }
    }
</script>

